<template>
  <div class="warp" flex="dir:top box:first">
    <div>
      <!--<div class="title">充电桩插座列表</div>-->

      <el-select v-model="value"
                 class="charger-select"
                 @change="optionSelect">
        <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
        </el-option>
      </el-select>
      <div class="list-thead">
        <table>
          <col width="50%"/>
          <col width="50%"/>
          <thead>
          <tr>
            <td>名称</td>
            <td>状态</td>
          </tr>
          </thead>
        </table>
      </div>
    </div>

    <ul class="list">
      <li v-for="(item,index) in socketList"
          :key="index"
          flex="dir:left">
        <div class="text-overflow w-50" :title="item.carportName">{{`${item.equipmentNo}号桩${item.socketId}口`}}</div>
        <div class="w-50">{{socketStatus(item.status)}}</div>
      </li>
    </ul>

  </div>
</template>
<script>
export default {
  data () {
    return {
      socketList: [], // 插座列表
      options: [], // 充电桩select列表
      value: '' // 选择的充电桩id
    }
  },
  props: ['deptId'],
  mounted () {
    this.init()
  },
  methods: {
    // 初始化数据，获取该小区下所有的充电桩
    init: function () {
      let url = this.$base.getUrl('getList')
      let params = {
        url: url,
        data: {
          deptId: this.deptId,
          moduleCode: 100
        }
      }
      this.$store.dispatch('getForm', params).then((res) => {
        const arr = res.list.map(item => ({
          value: item.equipmentNo,
          label: `${item.equipmentName}-${item.equipmentAddr}`
        }))

        const equipmentNo = arr[0].value
        this.options = arr
        this.value = equipmentNo
        this.getSocketList(equipmentNo)
      })
    },
    // 根据充电桩ID获取该充电桩下所有插座
    getSocketList: function (equipmentNo) {
      let url = this.$base.getUrl('roschargersocket/list')
      let params = {
        url: url,
        data: {
          equipmentNo
        }
      }
      this.$store.dispatch('postForm', params).then((res) => {
        this.socketList = res.page.list
      })
    },
    // 切换充电桩选项
    optionSelect: function (value) {
      this.getSocketList(value)
    },
    // 充电桩插座状态
    socketStatus: function (status) {
      // 插座状态 0：准备充电，1：空闲，2：充电中，3：故障，4：预约中
      switch (status) {
        case '0':
          return '准备充电'
        case '1':
          return '空闲'
        case '2':
          return '充电中'
        case '3':
          return '故障'
        case '4':
          return '预约中'
        default:
          return '' // TODO 默认一种状态，待确认
      }
    }
  }
}
</script>
<style lang="less" scoped>
  .w-25 {
    width: 25%;
  }

  .w-50 {
    width: 50%;
  }

  .charger-select {
    width: 100%;
  }

  .warp {
    .title {
      color: #fff;
      font-size: 14px;
    }
    padding: 20px;
    height: 100%;
    box-sizing: border-box;
  }

  .list-thead {
    margin-top: 15px;
    overflow-x: hidden;
    width: 100%;
    table {
      width: 100%;
      td {
        text-align: center;
      }
      thead {
        background-color: rgba(0, 0, 0, 0.2);
        width: 100%;
        height: 24px;
        line-height: 24px;
        font-size: 12px;
        color: #50E3C2;
        letter-spacing: 0.29px;
      }
    }
  }

  .list {
    margin-top: 10px;
    overflow-x: hidden;
    overflow-y: scroll;
    width: 100%;
    text-align: center;
    color: #9FACC3;
    li {
      width: 100%;
      height: 30px;
      line-height: 30px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
  }

  .list::-webkit-scrollbar {
    width: 0 !important
  }

  //chrome 和Safari
  .list {
    -ms-overflow-style: none;
  }

  //IE 10+
  .list {
    overflow: -moz-scrollbars-none;
  }

  //Firefox

</style>
